//-------------------------Functions----------------------

function windowToCanvas(sudoku, x, y) {
    var bbox = sudoku.getBoundingClientRect();
    return { x: x - bbox.left * (sudoku.width / bbox.width),
             y: y - bbox.top * (sudoku.height / bbox.height)
    };
}

function SudokuBox(id) {
    this.canvas = document.getElementById(id)
    this.context = this.canvas.getContext('2d');
    this.boxLen = Math.min(this.canvas.width, this.canvas.height); 
    this.gridWidth = this.boxLen / 9.5;
    this.fontHeight = this.gridWidth / 2.5;
    this.data = new Array(9);
    for( var i = 0; i < 9; ++i ) {
        this.data[i] = new Array(9);
        for( var j = 0; j < 9; ++j ) {
            this.data[i][j] = Array();
        }
    }

    this.context.font = this.fontHeight + 'px Arial';

    if( typeof SudokuBox._init == 'undefined' ) {

        SudokuBox.prototype.drawBox = function() {
            this.context.strokeStyle = 'black';

            for( var i=0; i < 10; i++ ) {
                this.context.lineWidth = i % 3 == 0 ? 4 : 2;
                this.context.beginPath();
                this.context.moveTo(0, i * this.gridWidth);
                this.context.lineTo(this.gridWidth * 9, i * this.gridWidth);
                this.context.moveTo(i * this.gridWidth, 0);
                this.context.lineTo(i * this.gridWidth, this.gridWidth * 9);
                this.context.stroke();
            }
        }

        SudokuBox.prototype.redraw = function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.drawBox();

            for( var x in this.data ) {
                for( var y in this.data[x] ) {
                    if( this.data[x][y].length == 0 ) continue;

                    var text = this.data[x][y].join(" / "), 
                        textWidth = this.context.measureText(text).width;

                    this.context.fillText(text, 
                            x * this.gridWidth + this.gridWidth / 2 - textWidth / 2,
                            y * this.gridWidth + this.gridWidth / 2 + this.fontHeight / 2);    
                }
            }
        }

        SudokuBox.prototype.clearNum = function(x, y) {
            that.data[x][y] = Array();
            that.redraw();
        }

        SudokuBox.prototype.addNum = function(x, y, number) {
            if( $.inArray(number, this.data[x][y]) != -1 || 
                    this.data[x][y].length > 2 ) {
                console.debug("add fail!", x, y, number);
                return;
            }

            this.data[x][y].push(number);
            this.redraw();
        }

        SudokuBox.prototype.getCanvasLoc = function(e) {
            var box = this.canvas.getBoundingClientRect();

            return {x: e.clientX - box.left * (this.canvas.width / box.width),
                y: e.clientY - box.top * (this.canvas.height / box.height)
            };
        }

        SudokuBox.prototype.getGridLoc = function(loc) {
            return {x: Math.floor(loc.x / this.gridWidth), 
            y: Math.floor(loc.y / this.gridWidth)}
        }

        SudokuBox.prototype.onmousedown = function(e) {
            var loc = this.getGridLoc(this.getCanvasLoc(e)); 
            console.debug(loc);
        }

        SudokuBox._init = true;
    }

    var that = this;
    this.canvas.onmousedown = function(e){
        that.onmousedown(e);
    };

}

var sudokuBox = new SudokuBox('sudoku');
sudokuBox.redraw();
sudokuBox.addNum(0, 0, 0);
sudokuBox.addNum(0, 1, 1);
sudokuBox.addNum(0, 1, 2);
sudokuBox.addNum(1, 1, 2);
